<template>
  <!-- 评论情绪分布情况 -->
  <div class="emo">
    <dv-border-box-12 style="width:800px; height:600px;">
      <dv-decoration-7 style="width:150px;height:30px;">情绪分布情况</dv-decoration-7>
      <div id="echarts1-emo" style="width:700px; height:500px;"></div>
    </dv-border-box-12>
  </div>
</template>

<script>
export default {
  methods: {
    echarts1() {
      var myChart = this.$echarts.init(document.getElementById('echarts1-emo'));
      var option = {
        toolbox: {
          show: true,
           feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true, backgroundColor: 'black' }
          },
          iconStyle: {
             borderColor: 'white'
          },
          right: '30px'
        },
        title: {
          text: '总计',
          textStyle: {
            color: 'white'
          }
        },
        textStyle: {
          color: 'white'
        },
        legend: {
          textStyle: {
            color: "white"
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['中立', '消极', '积极']
        },
        series: [
          {
            name: '比亚迪宋PLUS DM-i',
            type: 'bar',
            data: [183, 859, 1241],
            label: {  
               show: true,
               fontWeight: "bold",
               color: 'orange'
            },
          },
          {
            name: '特斯拉Model Y',
            type: 'bar',
            data: [58, 182, 579],
            label: {  
               show: true,
               fontWeight: "bold",
               color: 'white'
            },
          }
        ]
      };
      myChart.setOption(option);
    }
  },
  mounted() {
    this.echarts1()
  },
}
</script>

<style lang="less" scoped>
#echarts1-emo {
  margin: auto;
  padding-top: 25px;
}

.dv-decoration-7 {
  color: white;
  margin: auto;
  padding-top: 20px;
}
</style>